<template>
  <el-config-provider :size="size" :locale="locale">
    <div class="index">
      <el-container>
        <!-- 侧边栏 -->
        <el-aside style="width: auto">
          <aside-menu :isCollapse="isCollapse" />
        </el-aside>
        <!-- 主要内容 -->
        <el-container>
          <!-- 头部 -->
          <el-header>
            <!-- 面包屑 -->
            <div class="head">
              <div>
                <crumbs-mode @toggleCollapse="isCollapse = $event" />
              </div>
              <div class="side">
                <!-- 全屏 -->
                <full-screen />
                <span>|</span>
                <!-- 字体 -->
                <font-size @changeFont="changeFont" />
                <span>|</span>
                <!-- 颜色 -->
                <change-colors />
                <span>|</span>
                <!-- 头像 -->
                <UserHaed />
              </div>
            </div>
            <!-- tag标签 -->
            <tag-module />
          </el-header>
          <!-- 内容 -->
          <el-main>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-config-provider>
</template>

<script>
import AsideMenu from "@/components/AsideMenu.vue"; //左侧菜单栏
import CrumbsMode from "@/components/CrumbsMode.vue"; //面包屑
import TagModule from "@/components/TagModule.vue"; //tag标签页
import FullScreen from "@/components/naviGation/FullScreen.vue"; //全屏
import FontSize from "@/components/naviGation/FontSize.vue"; //改变字体大小
import ChangeColors from "@/components/naviGation/ChangeColors.vue"; //改变颜色
import UserHaed from "@/components/naviGation/UserHaed.vue"; //个人信息
import zhCn from "element-plus/lib/locale/lang/zh-cn";
export default {
  components: {
    AsideMenu,
    CrumbsMode,
    TagModule,
    FullScreen,
    FontSize,
    ChangeColors,
    UserHaed,
  },
  data() {
    return {
      isCollapse: false, //是否折叠
      size: "",
      locale: zhCn, //中文化
    };
  },
  created() {
    this.size = sessionStorage.getItem("font"); //创建后把默认字体大小赋值给size
  },
  methods: {
    changeFont(e) {
      this.size = e;
      sessionStorage.setItem("font", e); //临时存储
    },
  },
};
</script>
<style scoped lang="less">
.index {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .el-container {
    height: 100%;
    overflow: hidden;
    // 主要内容
    .el-aside {
      overflow: hidden;
      height: 100%;
      background-color: #545c64;
    }
    .head {
      display: flex;
      align-items: center;
      & div:nth-child(1) {
        width: 84%;
      }
      .side {
        display: flex;
        align-items: center;
        & > div {
          display: inline-block;
        }
        span {
          color: #dcdfe6;
          padding: 0 15px;
        }
      }
    }
    .el-main {
      width: 100%;
    }
    // 头部
    .el-header {
      height: 100px;
      padding: 0px;
      width: 100%;
      border-bottom: 1px solid #ebedf0;
      box-shadow: 10px 1px 10px 1px #eef0f2;
    }
  }
}
</style>